<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 搜索 -->
        <el-form>
           <el-form-item label="学科名称">
            <el-input v-model="queryInp" size="small" style="width: 200px;" ></el-input>
            <el-button style="margin-left:10px" size="small" @click="hEliminate">清除</el-button>
            <el-button type="primary" size="small" @click="hQueryBtn" :loading="isloading">搜索</el-button>
            <el-button class="filter-item fr" @click="addSubBtn" type="success" icon="el-icon-edit" size="small">新增学科</el-button>
           </el-form-item>
        </el-form>
        <el-alert
        :title="totalContent"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        ></el-alert>
        <el-table
          :data="tableData"
          v-loading='isloading'
          style="width: 100%">
          <el-table-column
            type="index"
            label="序号">
          </el-table-column>
          <el-table-column
            prop="subjectName"
            label="学科名称">
          </el-table-column>
          <el-table-column
            prop="username"
            label="创建者">
          </el-table-column>
          <el-table-column
            prop="addDate"
            width="200"
            label="创建日期">
            <template slot-scope="scope">
              {{ scope.row.addDate | addDate }}
            </template>
          </el-table-column>
          <el-table-column
            prop="isFrontDisplay"
            label="前台是否显示">
            <template slot-scope="scope">
              <span v-if="scope.row.isFrontDisplay===1">是</span>
              <span v-else>否</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="twoLevelDirectory"
            label="二级目录">
          </el-table-column>
          <el-table-column
            prop="tags"
            label="标签">
          </el-table-column>
          <el-table-column
            prop="totals"
            label="题目数量">
          </el-table-column>
          <el-table-column
            label="操作"
            width="250">
            <template slot-scope="scope">
              <el-button @click="handClass(scope.$index,scope.row)" type="text">学科分类</el-button>
              <el-button @click="handLab(scope.$index,scope.row)" type="text">学科标签</el-button>
              <el-button @click="handMod(scope.$index,scope.row)" type="text">修改</el-button>
              <el-button @click="handDel(scope.$index,scope.row)" type="text">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            class="pagination"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="pageSize"
            :disabled='isloading'
            layout="prev, pager, next, sizes, jumper"
            :total="total">
          </el-pagination>
        </div>
        <el-dialog
          :title="theTitle"
          :visible.sync="dialogVisible"
          v-if="dialogVisible"
          width="30%">
          <el-form ref="form" :model="form" :rules="rules">
            <el-form-item label="学科名称" prop="addInp">
              <el-input v-model="form.addInp"  style="width: 200px;" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-form>
          <el-form>
            <el-form-item label="是否显示">
              <el-switch
                style="margin-left: 5px;"
                v-model="swiValue"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button v-if="addOrmod" type="primary" @click="addBtn">确 定</el-button>
            <el-button v-else type="primary" @click="modBtn">确 定</el-button>
          </span>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import { list, add, remove, update } from '@/api/hmmm/subjects'
import { rTime } from '@/filters/index'
export default {
  data () {
    return {
      isloading: false,
      theTitle: '新增学科',
      addOrmod: true, // 默认显示addBtn按钮
      queryInp: '', // 查询框
      queInp: '', // 查询框(备用)
      swiValue: true, // 是否在当前页面显示
      isFrontDisplay: 1, // 后台返回的isFrontDisplay 1=是 0=否
      dialogVisible: false, // 对话框
      currentPage: 1, // 当前页数
      curPage: '', // 当前页数(备用)
      pageSize: 10, // 一页现实的数
      total: 0, // 一共多少数据
      theId: 0,
      totalContent: '',
      tableData: [],
      form: {
        addInp: '' // 添加框
      },
      rules: {
        addInp: [
          { required: true, message: '请输入科目名', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.loading()
  },
  filters: {
    addDate (val) {
      return rTime(val)
    }
  },
  methods: {
    async loading (queryInp, currentPage) {
      currentPage ? this.currentPage = currentPage : this.currentPage = this.curPage * 1
      const paramsObj = {
        page: this.currentPage,
        pagesize: this.pageSize,
        subjectName: queryInp
      }
      try {
        this.isloading = true
        const res = await list(paramsObj)
        this.tableData = res.data.items
        this.total = res.data.counts
        this.isloading = false
        this.totalContent = '一共有' + res.data.counts + '条数据'
      } catch (err) {
        console.log(err)
        this.isloading = false
      }
    },
    // 当每页显示的条数发生改变
    handleSizeChange (change) {
      this.pageSize = change
      this.currentPage = 1
      this.fixBugs()
    },
    // 点击分页
    handleCurrentChange (curpage) {
      this.curPage = curpage
      this.currentPage = curpage
      this.fixBugs()
    },
    // 清除按钮
    hEliminate () {
      this.queryInp = ''
    },
    // 查询按钮
    hQueryBtn () {
      this.queInp = this.queryInp
      this.currentPage = 1
      this.fixBugs()
    },
    // 删除学科
    async doDelete (id) {
      try {
        await remove({ id })
        this.$message.success('删除成功')
        this.fixBugs()
      } catch (err) {
        this.$message.error('删除失败')
      }
    },
    // 点击删除按钮
    handDel (index, row) {
      this.$confirm('你真的要删除吗?').then(() => {
        this.doDelete(row.id)
      }).catch(() => {
        // 取消
      })
    },
    // 点击添加学科按钮
    addSubBtn () {
      this.addOrmod = true
      this.theTitle = '新增学科'
      this.dialogVisible = true
      this.swiValue = true
      this.form.addInp = ''
    },
    // 点击添加学科的确认按钮
    addBtn () {
      this.swiValue ? this.isFrontDisplay = 1 : this.isFrontDisplay = 0
      const paramsObj = {
        subjectName: this.form.addInp,
        isFrontDisplay: this.isFrontDisplay
      }
      this.$refs.form.validate(async (valid) => {
        if (paramsObj.subjectName.replace(/(^\s*)|(\s*$)/g, '') === '') {
          this.$message.error('科目名称不能为空格')
        } else {
          if (valid) {
            try {
              await add(paramsObj)
              this.$message.success('添加科目成功')
              this.queInp = ''
              this.queryInp = ''
              this.currentPage = 1
              this.loading('', this.currentPage)
            } catch (err) {
              this.$message.error('添加科目失败')
            }
            this.dialogVisible = false
          }
        }
      })
    },
    // 点击修改学科
    handMod (index, row) {
      this.theTitle = '修改学科'
      this.addOrmod = false
      this.dialogVisible = true
      this.form.addInp = row.subjectName
      row.isFrontDisplay === 1 ? this.swiValue = true : this.swiValue = false
      this.theId = row.id
    },
    // 点击修改学科的确认按钮
    async modBtn () {
      this.swiValue ? this.isFrontDisplay = 1 : this.isFrontDisplay = 0
      const paramsObj = {
        id: this.theId,
        subjectName: this.form.addInp,
        isFrontDisplay: this.isFrontDisplay
      }
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          try {
            await update(paramsObj)
            this.$message.success('修改成功')
            this.form.addInp = ''
            this.dialogVisible = false
            this.fixBugs()
          } catch (err) {
            this.$message.error('修改失败')
          }
        } else {
          return false
        }
      })
    },
    // 修复bug
    fixBugs () {
      this.loading(this.queInp, this.currentPage)
      if (this.queInp) { this.queryInp = this.queInp }
    },
    // 点击学科分类
    handClass (index, row) {
      this.$router.push('/subjects/directorys?id=' + row.id + '&name=' + row.subjectName)
    },
    // 点击学科标签
    handLab (index, row) {
      this.$router.push('/subjects/tags?id=' + row.id + '&name=' + row.subjectName)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 10px;
  text-align: right;
}
</style>
